<div class="dynamic-table-container" ng-attr-data-has-pagination="{{ $ctrl.paginatorAdapter.hasPagination }}">
  <table class="table table-condensed table-hover" data-test="DynamicTable">
    <thead>
      <tr>
        <th ng-repeat="column in $ctrl.columns" ng-click="$ctrl.onColumnHeaderClick($event, column)"
          class="sortable-column" ng-class="'content-align-' + column.alignContent + ' display-as-' + column.displayAs">
          <span ng-if="($ctrl.orderBy.length > 1) && ($ctrl.orderByColumnsIndex[column.name] > 0)"
            class="sort-order-indicator">{{ $ctrl.orderByColumnsIndex[column.name] }}</span>
          <span>{{column.title}}</span>
          <i ng-if="$ctrl.orderByColumnsIndex[column.name] > 0"
            ng-class="{
              'fa': true,
              'fa-caret-down': $ctrl.orderByColumnsDirection[column.name] > 0,
              'fa-caret-up': $ctrl.orderByColumnsDirection[column.name] < 0
            }"></i>
        </th>
        <th class="dynamic-table-spacer"></th>
      </tr>
    </thead>
    <thead ng-if="$ctrl.searchColumns.length > 0">
      <th class="p-t-10 p-b-10 p-l-15 p-r-15" colspan="{{ $ctrl.columns.length + 1 }}">
        <input type="text" class="form-control" placeholder="Search..."
          ng-model="$ctrl.searchTerm" ng-model-options="{ allowInvalid: true, debounce: 200 }"
          ng-change="$ctrl.onSearchTermChanged()">
      </th>
    </thead>
    <tbody>
      <tr ng-repeat="row in $ctrl.rowsToDisplay"
        dynamic-table-row columns="$ctrl.columns" row="row"
        render="$ctrl.renderSingleRow"
      ></tr>
    </tbody>
  </table>
</div>
<paginator paginator="$ctrl.paginatorAdapter"></paginator>
